<template>
  <div class="box" ref="charts"></div>
</template>

<script setup lang="ts">
//引入echarts
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
//获取容器DOM节点
let charts = ref();
let mycharts;
//封装一个函数:函数作用是返回mychart配置项对象
const getOption = () => {
  return {
    xAxis: {
      type: "category", //x轴均分
      //隐藏x轴
      show: false,
      //x轴两边不留白
      boundaryGap: false,
    },
    yAxis: {
      //隐藏y轴
      show: false,
    },
    series: {
      type: "line",
      data: props.data,
      //平滑曲线
      smooth: true,
      //拐点样式
      itemStyle: {
        //拐点透明度为零
        opacity: 0,
      },
      //区域填充
      areaStyle: {
        //线性渐变
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "yellow", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "orange", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
    //调整图形图标的布局
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      show: true,
      //图标底层的颜色
      backgroundColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "yellow", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "skyblue", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    },
    //提示插件
    tooltip:{
        trigger:'axis',
        //限制展示区域，在容器内部
         confine:true
    }
  };
};

//初始化echarts实例
onMounted(() => {
  //初始化echarts实例
  mycharts = echarts.init(charts.value);
  //设置配置项
  mycharts.setOption(getOption());
});

//接受组件传递过来折线图的数据(来自于服务器的)
let props = defineProps(["data"]);
//监听父组件传递过来props数据变化
//监听到props变化之后，重配置图标配置项
watch(
  () => props.data,
  () => {
    mycharts.setOption(getOption());
  }
);
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #ccc;
}
</style>